<template>
	<view class="">
		<view class="bannar-box">
			<image class="img" src="../images/bannar.png" mode=""></image>
			<view class="sign-title">
				<view class="sign-text">
					坚持签到
				</view>
				<view class="sign-day">
					{{ day }}天
				</view>
			</view>
		</view>

		<view class="calendar-box">
			<view class="btn-box">
				<view class="btn" v-for="(item, index) in family" :class="{'btn-active': item.id == btnActive}" :key="index" @click="chooseFamily(item.id)">
					{{item.name}}
				</view>
			</view>

			<view class="sign-tip">
				<view class="sign-tip-text">
					四月已签到 <view class="sign-visited">{{visitedSign.length}}</view>/{{dayNum}}天
				</view>
				<view class="sign-btn sign-scene">
					签到场景
				</view>
				<view class="sign-btn sign-amount">
					签到金额
				</view>
			</view>

			<Calendar :visitedSign="visitedSign"/>
			
			<view class="footer">
				<view class="footer-btn">
					立即签到
				</view>
				<view class="footer-tip">
					每日8:00签到提醒
				</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	import Calendar from './calendar.vue'
	export default {
		data() {
			return {
				day: 456, // 天数
				family: [{ // 家庭成员
					name: '大宝',
					id: 1
				}, {
					name: '妈妈',
					id: 2,
				}, {
					name: '爸爸',
					id: 3
				}],
				btnActive: 1, // 当前选中家庭成员
				dayNum: 0, // 获取当月天数
				visitedSign: [1,2,3,4,5,6,7,8]
			};
		},
		components: {
			Calendar
		},
		mounted() {
			this.getMonthDay()
		},
		methods: {
			// 选择家庭成员
			chooseFamily(val) {
				this.btnActive = val
			},
			getMonthDay() {
				var curDate = new Date();
				var curMonth = curDate.getMonth();
				curDate.setMonth(curMonth + 1);
				curDate.setDate(0);
				this.dayNum = curDate.getDate()
			}
		}
	}
</script>

<style lang="scss">
	.bannar-box {
		display: block;
		width: 750rpx;
		height: 400rpx;

		.img {
			width: 100%;
			height: 100%;
		}

		.sign-title {
			font-size: 60rpx;
			position: absolute;
			top: 46rpx;
			left: 60rpx;
			color: #fff;
		}
	}

	.calendar-box {
		width: 708rpx;
		box-shadow: 1px 1px 10px 1px #fff;
		position: absolute;
		top: 300rpx;
		left: 50%;
		margin-left: -354rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.btn-box {
			display: block;
			margin-top: 57rpx;
			margin-bottom: 56rpx;
			margin-left: 41rpx;
			font-size: 13rpx;

			.btn {
				display: inline-block;
				width: 146rpx;
				height: 57rpx;
				line-height: 57rpx;
				background-color: #F1F2F2;
				border-radius: 57px;
				text-align: center;
				margin-right: 14rpx;
			}

			.btn-active {
				background-color: #2ED19F;
				color: #fff;
			}
		}
		.sign-tip{
			margin-left: 41rpx;
			margin-bottom: 56rpx;
			.sign-tip-text{
				display: inline-block;
				letter-spacing: 3rpx;
				.sign-visited{
					display: inline-block;
					color: #2ED19F;
				}
			}
		}
		.sign-btn{
			display: inline-block;
			font-size: 12rpx;
			width: 128rpx;
			height: 51rpx;
			line-height: 51rpx;
			text-align: center;
			border-radius: 51rpx;
			color: #01D591;
			border: 2rpx solid #01D591;
			margin-left: 16rpx;
		}
	}
	
	.footer {
		text-align: center;
		.footer-btn{
			display: block;
			width: 540rpx;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 92rpx;
			background-color: #2ED19F;
			color: #fff;
			text-align: center;
			margin: auto;
			margin-top: 76rpx;
		}
		.footer-tip{
			color: #999999;
			margin-top: 58rpx;
			margin-bottom: 144rpx;
		}
	}
</style>
